<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8"/>
    <title>生鲜商城</title>
    <!-- 引入样式 -->
    <link
            rel="stylesheet"
            href="https://unpkg.com/element-ui/lib/theme-chalk/index.css"
    />
    <script src="js/vue.js" type="text/javascript" charset="utf-8"></script>
    <!-- 引入组件库 -->
    <script src="https://unpkg.com/element-ui/lib/index.js"></script>
    <script src="js/jquery.js"></script>
</head>
<body>
<el-container id="app">
    <el-header style="height:510px">
        <el-menu
                :default-active="activeIndex"
                class="el-menu-demo"
                mode="horizontal"
                @select="handleSelect"
        >
            <div class="demo-image">
                <div class="block" :key="img.headbg">
                    <el-image
                            style="width: 1920px; height: 440px"
                            :src="img.headbg"
                            :fit="img.headbg">
                    </el-image>
                </div>
            </div>
            <el-menu-item index="11">首页</el-menu-item>
            <el-menu-item index="22">商品</el-menu-item>
            <el-menu-item index="33">限时秒杀</el-menu-item>
            <el-menu-item index="44">领券中心</el-menu-item>
            <el-menu-item index="55">
                <a href="/loginAndRegister" target="_blank" v-if="user.userName=='' "  style="text-decoration: none">登录/注册</a>
                <a href="/myCenter" v-if="user.userName != '' " v-text="user.userName" style="color: #ED2553;text-decoration: none">{{user.userName}}</a>
                <a href="/shoppingCart" v-if="user.userName != '' " class="el-icon-shopping-cart-1"  style="color: #ED2553;text-decoration: none"></a>
            </el-menu-item>
            <el-menu-item index="66">
                <a href="javascript" target="_blank" v-if="user.userName==''"></a>
                <a href="/logout" v-else v-text="logout" style="text-decoration: none">{{logout}}</a>
            </el-menu-item>
        </el-menu>
        <div class="line"></div>
    </el-header>
    <el-main></el-main>
</el-container>
<script>
    var app = new Vue({
        el: "#app",
        data: {
            activeIndex: "11",
            productType: [],
            img: {
                headbg: '/img/bg/banner3.jpg',
                fits: ['fill', 'contain', 'cover', 'none', 'scale-down'],
            },
            user:{
                userName:'',
            },
            logout:'退出登录',
        },
        methods: {
            handleSelect: function (key, keyPath) {
                if(key==11){
                    window.location.href="/"
                }else if(key==22){
                    window.location.href="/toProduct"
                }else if(key==33){
                    window.open("/KillProduct")
                }else if(key==44){
                    window.location.href="/couponCenter"
                }
            },
        },
        mounted: function () {
            var vm = this;
            //登录注册
            $.ajax({
                url:"/freshmarket/user/islogin",
                type:"get",
                success:function(data){
                    console.log(data);
                    if(data.success){
                        vm.user = data.data;
                    }

                }
            });
        },
    });
</script>
</body>
</html>
